<!DOCTYPE html>
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) --> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
    <title>Especias y plantas aromáticas</title> 
    <meta name="description" content="Especias y plantas aromáticas"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////--> 
    <link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    <style>
		html,body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		a {
			color: #09f;
		}
		a:hover {
			text-decoration: none;
		}
		#cabecera {
			background: rgba(255,255,255,.9);
			clear: both;
			display: block;
			height: 40px;
			line-height: 40px;
			padding: 20px;
			position: relative;
			z-index: 1;
		}
		#cabecera a.menu img{
    position: relative;
    padding-bottom: 69px;
		}
		#cabecera a.menu{
   
    margin-left: 10px;
		}
		#cabecera span.titulo{
			margin-left: 30px;
			vertical-align:top;
						padding-top: 30px;
		font-family: 'trebuchet ms',arial,sans-serif;
		color: #008888;
    font-size: 1.8em;
			/*horizontal-align:center;*/
		}
		.fluid_container {
			bottom: 0;
			height: 100%;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 0;
		}
		#camera_wrap_4 {
			bottom: 0;
			height: 100%;
			left: 0;
			margin-bottom: 0!important;
			position: fixed;
			right: 0;
			top: 0;
		}
		.descripcion-titulo{
			text-align:right;
			font-size: 3.8em;
    	padding-top: 40px;
    	padding-right: 20px;

		}
		.descripcion-contenido
		{
			text-align:right;
			font-size: 1.8em;
			padding-right: 20px;
			padding-left: 50%;
		}
		.camera_bar {
			z-index: 2;
		}
		.camera_thumbs {
			margin-top: -100px;
			position: relative;
			z-index: 1;
		}
		.camera_thumbs_cont {
			border-radius: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
		}
		.camera_overlayer {
			opacity: .1;
		}
	</style>

    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Scripts
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////--> 
    
    <script type='text/javascript' src='js/jquery/jquery-1.6.1.min.js'></script>
    <script type='text/javascript' src='js/jquery/jquery-ui-1.8.17.custom.min.js'></script>    
    <script type='text/javascript' src='js/fallr/jquery-fallr-1.2.js'></script>    
    <script type='text/javascript' src='js/camera/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='js/camera/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='js/camera/camera.min.js'></script> 
    <!--<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />-->
		<link href="js/fallr/fallr.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="js/jquery/jquery-ui-1.8.17.custom.css" media="screen" rel="stylesheet" type="text/css" />


    <script>
    	function cargaCategoria(categoria)
    	{
    		var categoriaActual = categoria;
    				$.get('contenido.xml', function (xml) {
    					$(xml).find('contenido').each(function () {
    					$(this).find('categoria').each(function () {
										    		if (categoriaActual==$(this).attr('titulo'))
										 				{
										 					$('#titulo-categoria').html($(this).attr('descripcion'));
										 					$('#camera_wrap_4').html('');
										 					$(this).find("producto").each(function () 
										 					{
										 						
										 						var datathumb = $(this).attr('thumbail');
										 						var dataimg = $(this).attr('foto');
										 						var dataTitulo = $(this).attr('nombre');
										 						var bodyHTML='';
										 						
										 						$(this).find("parrafo").each(function () {
										 							var parrafotitulo=$(this).attr('titulo');
										 							var parrafocontenido=$(this).text();
										 							bodyHTML+='<p class="descripcion-titulo">'+parrafotitulo+'</p><p class="descripcion-contenido">'+parrafocontenido+'</p>';
										 							
										 							});
										 							
																$('#camera_wrap_4').append('<div data-thumb="thumbs/'+datathumb+'" data-src="fotos/'+dataimg+'"><div id="body-'+dataTitulo+'" >'+bodyHTML+'</div></div>');
																
																//$('#body-'+dataTitulo).load('www.google.es');
																//$('#body-'+dataTitulo).load('parrafos/'+dataTitulo+'.html');
																//$.get('parrafos/'+dataTitulo+'.html', function(data) {$('#body').append(data);},'html');
										 					});
										 				
														}
									});	
									});
								$('#camera_wrap_4').camera({
								height: 'auto',
								loader: 'bar',
								pagination: false,
								thumbnails: true,
								hover: false,
								opacityOnGrid: false,
								imagePath: '../../images/'
								});
 						});
 						
    	};
    $('.menu').live('click',function(e){
    	e.preventDefault()
    	cargaCategoria($(this).attr('id'));
    	
    	});
		$(document).ready(function()
		{
					cargaCategoria("general");
		});
		
	</script>

</head>
<body>
	<div id="cabecera">
		<a href="index.htm"  alt="inicio" id="general"><img src="images/inicio.png" alt="inicio" style=""></a>
    <a class="menu" href="index.htm" id="categoria1"><img src="images/categoria1.png" alt="categoria1"></a>
    <a class="menu" href="index.htm" id="categoria2"><img src="images/categoria2.png" alt="categoria2"></a>
    <a class="menu" href="index.htm" id="categoria3"><img src="images/categoria3.png" alt="categoria3"></a>
    <a class="menu" href="index.htm" id="categoria4"><img src="images/categoria4.png" alt="categoria4"></a>
  <span class="titulo">La huerta del Gala</span><span class="titulo" id="titulo-categoria"></span>
    </div><!-- #back_to_camera -->
    
	<div class="fluid_container">
        <div class="camera_wrap camera_emboss pattern_1" id="camera_wrap_4">
          
        </div><!-- #camera_wrap_3 -->

    </div><!-- .fluid_container -->
    
</body> 
</html>